<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mood Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="jar-container">
        <div id="mood-container"></div>
    </div>
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close-button">×</span>
            <div class="info-section">
                <p id="date-info"></p>
                <p id="event-info"></p>
                <p id="location-info"></p>
                <p id="frequency-info"></p>
            </div>
        </div>
        </div>
    </div>
    <script src="scripts.js"></script>
    <div id="chat-container">
        <div id="chat-header">
            <img src="../assets/头像.png" alt="AI Assistant Avatar" style="height: 50px; vertical-align: middle;"> AI智能助手</div>
        <div id="chat-body">
            <p class="chat-message">你好！我是你的专属心情助手。告诉我你的心情，我可以建议一些活动和地点。</p>
        </div>
        <div id="chat-input">
            <input type="text" placeholder="输入你的心情..." />
            <button onclick="sendMood()">发送</button>
        </div>
    </div>    
</body>
</html>


<style>
@font-face {
    font-family: 'MyCustomFont';
    src: url('../assets/MaShanZheng-Regular.ttf') format('woff'),
         url('fonts/MyCustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body, html {
    height: 100%;
    margin: 0;
    background-size: cover;
    background: url("../assets/背景2.jpg")no-repeat center / cover;
    background-repeat: no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-family: Arial, sans-serif,'MyCustomFont'; /* 增加字体样式 */
}
/* 轻微的文本阴影以提升可读性 */
* {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}


#jar-container {
    width: 500px;
    height: 500px;
    border-radius: 50%; /* 创建圆形容器 */
    background: rgba(255, 255, 255, 0.2); /* 更透明的背景 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); /* 外部阴影和内部光晕 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden; /* 确保心情图标不会移出容器 */
    border: 5px solid rgba(255, 255, 255, 0.4); /* 边框，增加悬浮感 */
    background: url("../assets/圆形背景.png") no-repeat center / cover;
    transform: translate3d(0, 0, 1px) rotate(0deg); /* 添加轻微的3D转换以稳定 */
    will-change: transform; /* 优化变换性能 */
    animation: rotate 40s ease-in-out infinite; /* 使用更平滑的动画过渡效果 */
    backface-visibility: hidden;
    animation-timing-function: linear;
    transform-origin: center center;
    animation: rotate 40s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate3d(0, 0, 1px) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}



.jar-container img {
width: 100%; /*设置图片宽度为容器宽度 */
height: 100%;  /*设置图片高度为容器高度 */
object-fit: cover; /* 保持图片比例,填充容器 */
}

#mood-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.mood {
    position: absolute;
    cursor: pointer;
    transition: transform 2s ease-in-out; /* 加速过渡效果 */
    filter: drop-shadow(2px 4px 6px black);
    font-size: 48px; /* 增大字体大小来放大心情图标 */
    transform: scale(1.1); /* 稍微放大显示 */
    opacity: 0.95; /* 减少透明度 */
    /* animation: float 2s ease-in-out infinite; */
     /* 更慢更柔的浮动动画 */
}

/* 动画效果 */
@keyframes float {
    0%, 100% { transform: translate(0px, 0px); }
    25% { transform: translate(calc(10% - 20px), calc(10% - 20px)); }
    50% { transform: translate(calc(20% - 40px), calc(20% - 40px)); }
    75% { transform: translate(calc(-10% + 20px), calc(-10% + 20px)); }
}

.modal {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    display: none; /* 确保模态框初始为隐藏状态 */
    position: fixed;
    z-index: 1000; /* 确保模态框在最前面 */
    background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
    background-image: url("../assets/便签1.jpg"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

.modal, #chat-container {
    background-color: rgba(255, 255, 255, 0.9); /* 透明白色背景 */
    border-radius: 20px; /* 更圆的角度 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 更柔和的阴影 */
    padding: 20px; /* 增加内边距 */
    border: 1px solid rgba(0,0,0,0.05); /* 细边框 */
}

.info-section, .chat-message {
    background-color: rgba(255, 248, 240, 0.9); /* 淡淡的粉红色背景 */
    border-radius: 15px; /* 圆角 */
    padding: 12px 20px; /* 较大的内边距 */
}

#chat-input input, #chat-input button {
    border-radius: 25px; /* 更圆的按钮和输入框 */
    padding: 12px 20px; /* 增加内边距 */
    background-color: #f2f2f7; /* 轻柔的背景色 */
    border: 2px solid rgba(0,0,0,0.1); /* 细边框 */
}

#chat-input button {
    background-color: #62dbe4; /* 亮色按钮 */
    color: white; /* 白色文本 */
    font-weight: bold; /* 加粗字体 */
    box-shadow: 0 4px 8px rgba(0, 153, 204, 0.3); /* 适当的阴影增加立体感 */
    border: none;
    border-radius: 15px; /* 按钮边角 */
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.3s; /* 平滑背景过渡效果 */
}

#chat-input button:hover {
    background-color: #50c6d8; /* 鼠标悬停时更深的颜色 */
}

.modal-content {
    position: relative;
    padding: 20px;
    text-align: center;
    color: #333;
    font-family: 'Arial', sans-serif;
}

.info-section {
    position: relative;
    margin: 20px 0;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#date-info, #event-info, #location-info, #frequency-info {
    margin: 10px 0;
    padding: 5px 10px;
    color: #555;
    background: radial-gradient(circle, rgba(255, 192, 203, 0.6), transparent);
    border-radius: 10px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.close-button:hover {
    color: #333;
}

#chat-container {
    position: fixed;
    bottom: 20px; /* 略微增加距离底部的空间 */
    background-color: #ffffff; /* 纯白背景色 */
    border-radius: 15px; /* 更圆润的边角 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* 更柔和的阴影 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ddd; /* 添加边框提升视觉效果 */
    bottom: 20px;  /* 固定在页面底部 */
    right: 20px;   /* 固定在页面右侧 */
    width: 320px;  /* 固定宽度 */
    height: 450px; /* 固定高度 */
    background-color: #fff;  /* 白色背景 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* 阴影效果 */
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* 隐藏外部溢出 */
    z-index: 1000; /* 确保在最上层 */
}

#chat-header {
    background-color:#62dbe4; /* 鼠标悬停效果 *//* 更新为更柔和的蓝色 */
    color: white;
    padding: 12px 15px;
    font-size: 18px; /* 字体大小调整 */
    font-weight: 500; /* 字体粗细 */
    text-align: center;
}

#chat-header img {
    height: 50px; /* 控制图像的高度 */
    vertical-align: middle; /* 使图像与文字垂直对齐 */
    margin-right: 10px; /* 在图像和文字之间添加一些间隔 */
}


#chat-body {
    padding: 15px; /* 更多内边距 */
    overflow-y: auto;
    flex-grow: 1;
    background: #f8f9fa; /* 轻微的背景色差异 */
    overflow-y: auto; /* 允许内容溢出时垂直滚动 */
}

.chat-message {
    background-color: #e7e7e7; /* 调整对话框颜色 */
    border-radius: 18px;
    padding: 10px 15px;
    margin: 4px 0;
    max-width: 85%; /* 对话框最大宽度 */
    word-wrap: break-word;
    position: relative; /* 相对定位 */
}

.chat-message.user-message {
    align-self: flex-end; /* 用户消息右对齐 */
    background-color: #d1e7fd; /* 用户消息的颜色 */
}

.chat-message.ai-message {
    align-self: flex-start; /* AI消息左对齐 */
    background-color: #fde4d4; /* AI消息的颜色 */
}

#chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
    background: #f1f1f1; /* 输入区域的背景颜色 */
}

#chat-input input {
    flex-grow: 1;
    border: 1px solid #ccc; /* 输入框边框 */
    border-radius: 15px; /* 输入框边角 */
    padding: 8px 12px;
    margin-right: 8px; /* 留出按钮空间 */
}



.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
}

.close-button:hover {
    color: #777;
}

</style>

<script>
    // JavaScript代码需要根据实际逻辑调整
document.querySelector('.close-button').addEventListener('click', function() {
    document.querySelector('.modal').style.display = 'none';
});


window.onload = function() {
    const container = document.getElementById('mood-container');
    const modal = document.getElementById('modal');
    const closeButton = document.querySelector('.close-button');
    const dateInfo = document.getElementById('date-info');
    const eventInfo = document.getElementById('event-info');
    const locationInfo = document.getElementById('location-info');
    const frequencyInfo = document.getElementById('frequency-info');

    // 关闭模态窗口
    closeButton.onclick = function() {
        modal.style.display = "none";
    };

    // 统计数据
    const moodData = generateMoodDataMultipleTimes();
    const stats = generateMoodStats(moodData);

    // 生成心情图标并绑定事件
    moodData.forEach(mood => {
        const moodElement = document.createElement('div');
        moodElement.innerText = mood.mood;
        moodElement.className = 'mood';
        updatePosition(moodElement);

        moodElement.addEventListener('click', function() {
            const highestFrequencyLocation = Object.keys(stats).reduce((a, b) => stats[a] > stats[b] ? a : b);
            const highestFrequency = stats[highestFrequencyLocation];

            dateInfo.textContent = mood.time;
            eventInfo.textContent = "事件: " + mood.mood;
            locationInfo.textContent = "地点: " + mood.location;
            frequencyInfo.textContent = "Highest Frequency: " + highestFrequency + " at " + highestFrequencyLocation;

            modal.style.display = "block";
        });

        container.appendChild(moodElement);
    });
};

function generateMoodDataMultipleTimes() {
    const moods = [];
    for (let i = 0; i < 5; i++) {
        moods.push(generateMoodData());
    }
    return moods;
}

function generateMoodData() {
    const locations = ['公园', '家', '办公室', '商场', '健身房'];
    const times = ['早上', '中午', '下午', '晚上'];
    return {
        mood: '😊',
        location: locations[Math.floor(Math.random() * locations.length)],
        time: times[Math.floor(Math.random() * times.length)]
    };
}

function generateMoodStats(moods) {
    let locationFrequency = {};
    moods.forEach(mood => {
        if (locationFrequency[mood.location]) {
            locationFrequency[mood.location]++;
        } else {
            locationFrequency[mood.location] = 1;
        }
    });
    return locationFrequency;
}

function updatePosition(mood) {
    mood.style.left = `${Math.random() * 80 + 10}%`; // 避免太靠边
    mood.style.top = `${Math.random() * 80 + 10}%`;
    setTimeout(() => updatePosition(mood), 1600); // 每2秒更新位置
};

function sendMood() {
    var input = document.querySelector('#chat-input input');
    var mood = input.value;
    if (mood) {
        document.querySelector('#chat-body').innerHTML += `<p class="chat-message">心情: ${mood}</p>`;
        // 假设这里调用一个函数来处理心情并返回建议
        provideMoodAdvice(mood);
    }
    input.value = ''; // 清空输入框
}

function provideMoodAdvice(mood) {
    // 这里的逻辑将根据用户的心情来提供建议，下面是一个假设的示例
    var advice = "为什么不在晚上去公园散步呢？这对你现在的心情很有帮助。";
    document.querySelector('#chat-body').innerHTML += `<p class="chat-message">${advice}</p>`;
}

document.querySelector('#chat-input button').addEventListener('click', function() {
    const input = document.querySelector('#chat-input input');
    const message = input.value.trim();
    if (message) {
        const chatBody = document.querySelector('#chat-body');
        chatBody.innerHTML += `<div class='chat-message user-message'>${message}</div>`;
        // 模拟AI响应
        setTimeout(() => {
            chatBody.innerHTML += `<div class='chat-message ai-message'>这是AI的响应</div>`;
            chatBody.scrollTop = chatBody.scrollHeight;  // 滚动到底部
        }, 1000);
        input.value = '';  // 清空输入框
    }
});
</script>
